<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { DocumentCopy } from '@element-plus/icons-vue'
import { ref } from "vue";
import { crm_document_framework,beginnertutorial_detail } from "@/api/outbound"
const drawer = ref(false)
const input = ref("")
const defaultProps = {
  children: 'children',
  label: 'cateName',
}
const detail = ref({})
const handleNodeClick = (data) => {
  console.log(data)
  if( data.item_id ){
    beginnertutorial_detail({
      id:data.item_id
    }).then(res=>{
      if(res.code == 1000){
        detail.value = res.data
      }
    })
  }
}
const data = ref([])
function getDocument(){
  crm_document_framework().then(res=>{
    if(res.code == 1000){
      data.value = res.data
    }
  })
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="24"
    :xs="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 560
      }
    }"
  >
    <div class="helpInner">
      <div class="title">操作帮助文档</div>
      <div class="text">
        <p>遇到疑问，不知怎么操作</p>
        <p>点这里</p>
      </div>
      <el-button type="primary" @click="()=>{
        drawer = true
        getDocument()
      }">详情</el-button>
    </div>
  </re-col>
  <!-- 帮助文档详情 -->
  <el-drawer v-model="drawer" size="80%" append-to-body direction="rtl">
    <template #header="{ close, titleId, titleClass }">
      <div :id="titleId" :class="titleClass">
        <el-icon><DocumentCopy /></el-icon>
        <span class="text-sm ml-2">帮助文档</span>
        <span class="ml-4"></span>
        <el-input v-model="input" style="width: 240px" placeholder="输入关键字" />
        <span class="ml-4"></span>
        <el-button type="primary">搜索</el-button>
      </div>
    </template>
    <div class="line"></div>
    <el-row class="h-[85vh]" style="overflow: hidden;">
      <el-col :span="5">
        <span class="text-sm ml-4">序言</span>
        <div style="height: 12px;"></div>
        <el-tree
          style="max-width: 95%"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="19" style="height: 100%;overflow-y: scroll;">
        <template v-if="detail">
          <div style="padding: 0 35px 0 35px;" >
          <div class="text-center font-black border-b-1 pb-5">{{  detail?.title}}</div>
          <div class="pt-5" v-html="detail?.content"></div>
        </div>
        </template>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<style lang="scss" scoped>
:deep(.el-tree-node__content){
  height: 40px;
  // background: #fafafa;
}
:deep(.el-col-5){
  border-right: 1px solid #e5e7eb;
  // background: #fafafa;
}
:deep(.el-drawer__header){
  margin-bottom: 2px !important;
}
:deep(.el-drawer__body ){
  border-top: 1px solid #e5e7eb;
}
:deep(.el-input__wrapper){
  border-radius: 10px
}
.helpInner {
  width: 100%;
  padding: 14px 20px;
  background: url("@/assets/help.jpg");
  background-size: 100% 100%;
  border-radius: 6px;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: var(--pure-theme-menu-active-before);
    font-style: italic;
  }

  .text {
    margin-top: 6px;
    margin-bottom: 20px;
    p {
      font-size: 13px;
      // font-weight: bold;
      color: #919191;
    }
  }
}
.line{
  width: 100%;
  // border-top: 1px solid #bbbbbb;
}
</style>
